import { getSingerInfo } from "@/store/modules/singerSlice";
import classNames from "classnames";
import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import SingerWarrper from "./style";
// 欧美男歌手 2001
// 欧美女歌手 2002
// 欧美组合/乐队 2003
// 日本男歌手 6001
// 日本女歌手 6002
// 日本组合/乐队 6003
// 韩国男歌手 7001
// 韩国女歌手 7002
// 韩国组合/乐队 7003
// 其他男歌手 4001
// 其他女歌手 4002
// 其他组合/乐队 4003
const all = ["全部", "内地", "欧美", "韩国", "日本"];
const sex = ["全部", "男", "女", "组合"];

// 组装字母数组
const letterData = ["全部"];
for (var i = 0; i < 26; i++) {
  letterData.push(String.fromCharCode(65 + i));
}
function getCode(n) {
  switch (n) {
    case "内地男":
      return 1001;
    case "内地女":
      return 1002;
    case "内地组合":
      return 1003;
    case "欧美男":
      return 2001;
    case "欧美女":
      return 2002;
    case "欧美组合":
      return 2003;
    case "日本男":
      return 6001;
    case "日本女":
      return 6002;
    case "日本组合":
      return 6003;
    case "韩国男":
      return 7001;
    case "韩国女":
      return 7002;
    case "韩国组合":
      return 7003;
    default:
      return 1001;
  }
}
const index = memo(() => {
  const dispatch = useDispatch();
  useEffect(() => {
    if (singers.length >= 1) return;
    dispatch(getSingerInfo({}));
  }, []);
  const singers = useSelector((state) => {
    return state.singer.singer;
  });
  const [allselect, changallselect] = useState(all[0]);
  const [sexselect, changsexselect] = useState(sex[0]);
  const [letter,changeletter] = useState(undefined);
  const changeSelectAll = (n) => {
    changallselect(n);
    dispatch(getSingerInfo({
      cat:getCode(n + sexselect),
      initial:letter
    }));
  };
  const changeSelectSex = (n) => {
    changsexselect(n);
    dispatch(getSingerInfo({
      cat:getCode(allselect + n),
      initial:letter
    }));
  };
  const changeLetter = (n)=>{
    if(n==="全部"){
      changeletter(undefined);
      dispatch(getSingerInfo({
        cat:getCode(allselect + sexselect)
      }));
      return 
    }
    changeletter(n);
    dispatch(getSingerInfo({
      cat:getCode(allselect + sexselect),
      initial:n
    }));
  }
  return (
    <SingerWarrper>
      <ul className="btns">
        {all?.map((n, i) => {
          return (
            <li key={i} onClick={(e) => changeSelectAll(n)}>
              <a className={classNames({ active: n == allselect })}>{n}</a>
            </li>
          );
        })}
      </ul>
      <ul className="btns">
        {sex?.map((n, i) => {
          return (
            <li key={i} onClick={(e) => changeSelectSex(n)}>
              <a className={classNames({ active: n == sexselect })}>{n}</a>
            </li>
          );
        })}
      </ul>
      <div className="letter">
        {letterData.map((n, i) => {
          return <a className={classNames({
            active:!letter && i==0,
            active:letter==n
          })} key={i + 100} onClick={e=>changeLetter(n)}>{n}</a>;
        })}
      </div>
      <div className="singers">
        {singers?.map((n, i) => {
          return (
            <div className="singer-item" key={i}>
              {
                i<8 && (<div className="img">
                <img src={n.img1v1Url} alt="" />
                </div>)
              }
              <h4>{n.name}</h4>
            </div>
          );
        })}
        <div className="singer-item"></div>
        <div className="singer-item"></div>
        <div className="singer-item"></div>
      </div>
    </SingerWarrper>
  );
});

export default index;
